<template>
	<view class="athena-contact-cell" @click="contactClick(contactInfo)">
		<view class="contact-avatar">
			<u-avatar :text="contactInfo[fullNameAttr].substring(contactInfo[fullNameAttr].indexOf('/')-1)"
				mode="circle" bg-color="#0071C5" color="#FFFFFF"></u-avatar>
		</view>
		<view class="contact-info">
			<view class="contact-full-name">
				<view class="u-flex-1">
					{{contactInfo[fullNameAttr]}}
				</view>
			</view>
			<view class="contact-position-name u-line-1">
				{{positionName.length === 1 ? contactInfo[positionNameAttr] : contactInfo[positionName[0]][positionName[1]] }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "athena-contact-list",
		props: {
			contactInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			fullNameAttr: {
				type: String,
				default: 'fullName'
			},
			positionNameAttr: {
				type: String,
				default: 'positionName'
			}
		},
		computed: {
			positionName() {
				return this.positionNameAttr.split('.')
			}
		},
		methods: {
			contactClick(pContactInfo) {
				this.$emit('click', pContactInfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.athena-contact-cell {
		display: flex;
		margin-bottom: 20rpx;

		.contact-avatar {
			position: relative;
			width: 88rpx;
			height: 88rpx;
		}

		.contact-info {
			flex: 1;
			width: 0;
			padding-left: 20rpx;
			border-bottom: 1px solid #F7F8FA;

			.contact-full-name {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;

				.message-time {
					width: 100rpx;
					text-align: center;
					font-size: 24rpx;
					color: #CCCCCC;
				}
			}

			.contact-position-name {
				width: 100%;
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}

	.athena-contact-cell:first-child {
		padding-top: 30rpx;
	}
</style>
